<template>
  <div class="calendar">
    <Navbar title="日程助手" style="z-index: 100" />
    <!-- <div class="calendar-content"> -->
    <MyCalendar :list="scheduleList" @select="handleDateChange" @month="handleMonthChange" />
    <Timeline
      :list="scheduleList"
      :current-date="selectedDate"
      @delete="handleItemDelete"
      @item="handleItemSelect"
    />
    <!-- </div> -->
    <div class="btn-add" @click="handleAddClick">
      <van-icon name="plus" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import Navbar from '@/components/Navbar/index.vue'
import CalendarServe from '@/api/calendar.ts'
import MyCalendar from './comp/mcalendar.vue'
import Timeline from './comp/timeline.vue'

const DATE_FORMAT = 'YYYY-MM-DD'
const router = useRouter()

const scheduleList = ref<ScheduleItem[]>()
const selectedDate = ref<string>(dayjs())

const fetchSchedule = () => {
  scheduleList.value = []
  CalendarServe.list({ scheduleMonth: selectedDate.value.date(1).format(DATE_FORMAT) }).then(
    resp => {
      console.log(resp.data)
      const { data } = resp
      scheduleList.value = data
    }
  )
}
fetchSchedule()

const handleDateChange = (d: Date) => {
  selectedDate.value = dayjs(d)
}
const handleMonthChange = (d: date) => {
  selectedDate.value = dayjs(d)
  fetchSchedule()
}
const handleAddClick = () => {
  router.push({
    path: '/calendar/add',
    query: {
      date: selectedDate.value.format(DATE_FORMAT)
    }
  })
}

const handleItemDelete = item => {
  CalendarServe.delete({
    scheduleId: item.id
  }).then(() => {
    fetchSchedule()
  })
}

const handleItemSelect = item => {
  router.push({
    path: '/calendar/add',
    query: {
      date: dayjs(item.scheduleDate).format(DATE_FORMAT),
      id: item.id,
      content: item.content
    }
  })
}
</script>

<style lang="less">
.calendar {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  .btn-add {
    width: 50px;
    height: 50px;
    background: #3a75c5;
    box-shadow: 0px 5px 7.5px 4px #3a75c533;
    right: 10px;
    bottom: 50px;
    position: fixed;
    border-radius: 50%;
    color: #fff;
    font-size: 17.5px;
    text-align: center;
    line-height: 50px;
  }

  .calendar-content {
    flex-grow: 1;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
</style>
